<template>
    <div>
        <el-dialog title="编辑分组" :visible.sync="dialogVisible" :width="groupDialogWidth" :destroy-on-close="true"
            :close-on-click-modal="false" :close-on-press-escape="false" v-dialogDrag v-if="dialogVisible">
            <dialogCom @closeDialog="closeDialog" :groupObject="option.group" v-on="$listeners" v-bind="$attrs"
                @changeGroupList="changeGroupList" />
        </el-dialog>
        <div class="group_items" :key="config.id">
            <div class="group_list" v-if="config.default && config.default.length == 2">
                <div class="title">{{ config.title }}</div>
                <el-radio-group v-model="option.type" @change="changeGroupStatus">
                    <el-radio :label="1">分组</el-radio>
                    <el-radio :label="0">样本</el-radio>
                </el-radio-group>
            </div>
            <div class="group_list" v-if="config.default && config.default.length">
                <div class="title">
                    <span>编辑</span>
                    <el-tooltip class="item" effect="dark" content="分组调整" placement="top">
                        <i class="el-icon-edit edit_button" v-if="option.type == 1" @click="openDialog"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="撤销修改" placement="top">
                        <i class="el-icon-refresh-left edit_button" v-if="option.type == 0" @click="cancelGroup2"></i>
                    </el-tooltip>
                </div>

            </div>
            <div class="group_items_div">
                <template v-for="(item, index) in option.group.dataGroupList" v-if="option.type === 1">
                    <el-popover placement="bottom" trigger="hover" width="195" popper-class="my_popover_style">
                        <div class="group_childrens">
                            <template v-for="(i, y) in item.content">
                                <el-tooltip placement="top">
                                    <div slot="content">{{ i.title }}</div>
                                    <div class="group_children" :class="{ 'is_active': i.ischecked }"
                                        @click="changeChildStatus(i, item)">{{ i.title }}
                                    </div>
                                </el-tooltip>
                            </template>
                        </div>

                        <div class="items" :class="{ 'is_active': item.ischecked }"
                            @click="changeStatusItemY(item, option.group.dataGroupList)" slot="reference">{{ item.groupTitle
                            }}
                        </div>
                    </el-popover>
                </template>

                <template v-for="(item, index) in option.sample" v-if="option.type === 0">
                    <div class="items" :class="{ 'is_active': item.ischecked }"
                        @click="changeStatusItemN(item, option.sample)">
                        {{ item.groupTitle }}</div>
                </template>
            </div>

        </div>
    </div>
</template>

<script>
import { deepClone } from '@/utils';
import dialogCom from './dialogCom'
export default {
    name: 'GenescloudUiGroup',
    components: {
        dialogCom
    },
    props: {
        config: {
            type: Object,
            default: () => { }
        },
        data: {
            type: Object,
            default: () => { }
        },
    },
    watch: {
        data: {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            deep: false,
            immediate: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            groupDialogWidth: '800px',
            option: {},
            cloneOption: {},
            judgment: 0
        };
    },
    created() {
        let type1 = this.$attrs.option.analysisConfig.reduce((pre, item, index) => {
            pre.push(item.type)
            return pre
        }, [])
        let type2 = this.$attrs.option.legendConfig.reduce((pre, item, index) => {
            item.config.forEach(i => {
                pre.push(i.type)
            })
            return pre
        }, [])
        if (type1.includes('mutualExclusion') || type2.includes('mutualExclusion')) {
            this.judgment = 3
        } else {
            this.judgment = 2
        }
        this.cloneOption = deepClone(this.data)
    },
    methods: {
        init(config) {
            this.option = deepClone(config)
        },
        changeChildStatus(i, list) {
            if (i.ischecked) {
                let num = 0
                list.content.forEach(item => {
                    if (item.ischecked) {
                        num++
                    }
                })
                if (num < 3) return this.$message.error('每种分组至少需要存在2个样本！')
            }
            i.ischecked = !i.ischecked
            const flag = list.content.every(item => !item.ischecked)
            if (flag) {
                list.ischecked = false
            } else {
                list.ischecked = true
            }
            this.$emit('groupChange', this.config, this.option)
        },
        changeStatusItemY(value, data) {
            if (value.ischecked) {
                let num = 0
                data.forEach(item => {
                    if (item.ischecked) {
                        num++
                    }
                })
                if (this.config.type === 'Xgroup') {
                    if (num < this.judgment) return this.$message.error(`至少需要存在${this.judgment - 1}个分组！`)
                } else {
                    if (num < 2) return this.$message.error(`至少需要存在1个分组！`)
                }
            }
            value.ischecked = !value.ischecked
            if (!value.ischecked) {
                value.content.map(item => {
                    item.ischecked = false
                })
            } else {
                value.content.map(item => {
                    item.ischecked = true
                })
            }
            this.$emit('groupChange', this.config, this.option)
        },
        changeStatusItemN(item, data) {
            if (item.ischecked) {
                let num = 0
                data.forEach(item => {
                    if (item.ischecked) {
                        num++
                    }
                })
                if (num < 2) return this.$message.error('至少需要存在一种样本！')
            }
            item.ischecked = !item.ischecked
            this.$emit('groupChange', this.config, this.option)
        },
        closeDialog(value) {
            this.dialogVisible = value
        },
        openDialog() {
            this.dialogVisible = true
        },
        cancelGroup2() {
            this.option.sample = deepClone(this.cloneOption.sample)
        },
        changeGroupList(value) {
            this.dialogVisible = false
            this.option.group = deepClone(value)
            this.cloneOption.group = deepClone(value)
            this.$emit('groupChange', this.config, this.option)
        },
        changeGroupStatus() {
            this.$emit('groupChange', this.config, this.option)
        }
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.group_items {
    transform: translateX(-100px);

    .group_list {
        display: flex;
        align-items: center;
        min-width: 300px;

        .title {
            font-weight: 700;
            min-width: 100px;
            max-width: 100px;
            overflow: hidden;
            color: #606266;

            .edit_button {
                cursor: pointer;
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border-radius: 50%;
                margin-left: 10px;

                &:hover {
                    background-color: #ccc;
                }
            }
        }
    }

    .group_items_div {
        min-width: 300px;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 25px 0 25px 30px;
        width: 100%;
        // height: 200px;
        // overflow-y: auto;

        .items {
            width: 74px;
            height: 30px;
            text-align: center;
            line-height: 26px;
            margin: 0 10px 10px 0;
            background-color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid #ccc;
            color: #666;
            border-radius: 3px;
            cursor: pointer;

            &.is_active {
                border: 2px solid $themeTopToolColor;
            }
        }
    }
}

.my_popover_style {
    .group_childrens {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 100%;
        margin: 0 auto;

        .group_children {
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            width: 50px;
            margin: 0 8px 8px 0;
            height: 24px;
            text-align: center;
            line-height: 24px;
            border: 1px solid #ccc;
            cursor: pointer;

            &:nth-child(3n) {
                margin: 0;
            }

            &.is_active {
                border: 1px solid $themeTopToolColor;
            }
        }
    }
}

::v-deep .el-dialog__header {
    padding: 5px 35px !important;
    text-align: center;
    background: #fff;

    .el-dialog__title {
        color: #000 !important;
        font-weight: 700 !important;
    }
}

::v-deep .el-dialog__body {
    padding: 15px !important;
    height: 480px !important;
}
</style>